<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <link th:href="@{/common/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/common/css/font-awesome.css}" rel="stylesheet"/>
    <link th:href="@{/common/css/animate.min.css}" rel="stylesheet"/>
    <link th:href="@{/common/css/style.min.css}" rel="stylesheet"/>
    <!-- CSS -->
    <link th:href="@{/vendor/datatables/dataTables.bootstrap.css}" rel="stylesheet">
    <link th:href="@{/vendor/steps/jquery.steps.css}" rel="stylesheet"/>
   <!-- <link th:href="@{/vendor/switchery/switchery.min.css}" rel="stylesheet"/>-->
    <link th:href="@{/vendor/icheck/skins/all.css}" rel="stylesheet"/>
    <link th:href="@{/vendor/colorbox/colorbox.css}" rel="stylesheet"/>
    <link th:href="@{/vendor/colorbox/color-ext.css}" rel="stylesheet"/>
    <link th:href="@{/css/content.css}" rel="stylesheet">
    <style type="text/css">
        .need-cut-list .need-cut-item {
            float: left;
            overflow: hidden;
            text-align: center;
            margin-right: 25px;
            width: 160px;
        }
        table td.overflow_td {
            width: 80px;!important;
            overflow: hidden;!important;
            text-overflow: ellipsis;!important;
            white-space: nowrap;!important;
        }
    </style>
</head>
<body class="gray-bg">
<div id="uploader" class="clearfix upload-area display-no ">
    <div id="filePicker" class="fl upload-path"></div>
    <div class="fl upload-btn">上传文件</div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>备件管理</h5>

            <div class="ibox-tools">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="btn-createNew">
                    <i class="fa fa-plus"></i>新增备件
                </a>
            </div>
        </div>
        <div class="ibox-content" id="container">
            <form class="form-horizontal" id="query-goods-form">
                <div class="form-group">
                    <label class="col-sm-1 control-label">备件名称：</label>

                    <div class="col-sm-2">
                        <input type="text" class="form-control focus" name="goodsName" placeholder="输入备件名称"/>
                    </div>
                    <label class="col-sm-1 control-label">Part No：</label>

                    <div class="col-sm-2">
                        <input type="text" class="form-control focus" name="part" placeholder="输入Part No"/>
                    </div>
                    <div class="col-sm-offset-1 col-sm-1">
                        <button class="btn btn-w-m btn-primary" type="button"
                                id="btn-query">查&nbsp;&nbsp;&nbsp;询
                        </button>
                    </div>

                </div>
            </form>

            <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper form-inline" role="grid">
                <table class="table table-bordered table-hover dataTable table-striped "
                       id="DataTables_goods_list" aria-describedby="DataTables_Table_0_info" data-plugin="dataTable">
                    <thead>
                    <tr role="row">
                        <th class="sorting_desc overflow_td" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                            colspan="1" aria-label="企业名称：激活排序列升序">
                            备件名称
                        </th>
                        <th class="sorting_desc" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                            colspan="1" aria-label="企业名称：激活排序列升序" style="width: 100px;">
                            备件类型
                        </th>
                        <th class="sorting_desc overflow_td" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                            colspan="1" aria-label="企业名称：激活排序列升序">
                            备件描述
                        </th>
                        <th class="sorting_desc" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                            colspan="1" aria-label="企业名称：激活排序列升序" style="width: 100px;">
                            备件上下架状态
                        </th>
                        <th class="sorting_desc" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                            colspan="1" aria-label="企业名称：激活排序列升序" style="width: 100px;">
                            价格
                        </th>
                        <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                            colspan="1" aria-label="企业法人：激活排序列升序" style="width: 100px;">Part #
                        </th>
                        <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                            colspan="1" aria-label="企业电话：激活排序列升序" style="width: 100px;">Substitute Part
                        </th>
                        <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                            colspan="1" aria-label="" style="width: 100px;">操作
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="gradeA odd" th:each="goods,goodsstat:${goodsList}">
                        <td class="sorting_1" th:text="${goods.goodsName}">西数SSD 1TB</td>
                        <td class="sorting_1" th:text="${goods.typeDesc}">硬盘</td>
                        <td class="sorting_1" th:text="${goods.title}">西数SSD 1TB 性价比超高，速度超快</td>
                        <td class="sorting_1" th:text="${goods.status}">上架中</td>
                        <td class="sorting_1" th:text="${goods.price}">刀片服务器</td>
                        <td class="" th:text="${goods.part}">8765</td>
                        <td class="center " th:text="${goods.substitutePart}">8766</td>
                        <td class="center ">
                            <input type="hidden" th:value="${goods.id}">
                            <a class="btn btn-primary btn-detail">查看明细</a>
                            <a class="btn btn-danger btn-detail-delete">删除</a>
                        </td>
                    </tr>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="current_goodsId">
<div th:replace="goods/detail::detail">detail</div>
<div th:replace="goods/new::createNew">createNew</div>

<!-- JS -->
<script type="text/javascript" th:src="@{/common/js/jquery-3.1.1.min.js}"></script>
<script type="text/javascript" th:src="@{/common/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/vendor/layer/layer.js}"></script>
<script type="text/javascript" th:src="@{/vendor/template-web.js}"></script>
<script type="text/javascript" th:src="@{/vendor/datatables/jquery.dataTables.min.js}"></script>
<script type="text/javascript" th:src="@{/vendor/datatables/dataTables.bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/vendor/steps/jquery.steps.min.js}"></script>
<script type="text/javascript" th:src="@{/vendor/validate/jquery.validate.min.js}"></script>
<script type="text/javascript" th:src="@{/vendor/icheck/icheck.min.js}"></script>
<!--<script type="text/javascript" th:src="@{/vendor/switchery/switchery.min.js}"></script>-->
<script type="text/javascript" th:src="@{/vendor/colorbox/jquery.colorbox-min.js}"></script>
<script type="text/javascript" th:src="@{/vendor/webuploader/webuploader.js}"></script>
<script type="text/javascript" th:src="@{/js/alert.js}"></script>
<script type="text/javascript" th:src="@{/js/Utils.js}"></script>
<script type="text/javascript" th:src="@{/js/upload.js}"></script>
<script type="text/javascript" th:src="@{/js/images.js}"></script>
<script type="text/javascript" th:src="@{/js/goods.js}"></script>

<script id="images_tpl" type="text/html">
    <li class="need-cut-item {{coverflag}}">
        <a href="{{imageUrl}}" data-rel="colorbox" class="cboxElement">
            <img alt="160x94" style="width:160px;height:94px;" class="img_preview" src="{{imageUrl}}"/>
            <div class="tags">
              <span class="label-holder">
                  <span class="{{labelCls}}">{{labelName}}</span>
               </span>
            </div>
        </a>
        <div class="item-operate">
        <span>
            <a data-id="{{id}}" class="{{optClass}}">{{optName}}</a>
        </span>
            <span class="ml10">
            <a data-id="{{id}}" class="remove-img">{{optRemove}}</a>
        </span>
        </div>
    </li>

</script>
</body>
</html>
